<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/jpetstore.css" type="text/css">
</head>
<body>
<div th:replace="common/top"/>
<div id="Content">

    <div id="Catalog">
        <form action="/account/register_confirm" method="post" name="newAccountForm">

            <h3>User Information</h3>

            <table>
                <tr>
                    <td>User ID:</td>
                    <td><input type="text" name="username" /></td>
                </tr>
                <tr>
                    <td>password:</td>
                    <td><input type="text" name="password" /></td>
                </tr>
                <tr>
                    <td>Repeat password:</td>
                    <td><input type="text" name="repeatedPassword" /></td>
                </tr>

                <tr>
                    <td>First name:</td>
                    <td><input type="text" name="firstName" /></td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><input type="text" name="lastName" /></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text" size="40" name="email" /></td>
                </tr>
                <tr>
                    <td>Phone:</td>
                    <td><input type="text" name="phone" /></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td><input type="text" size="40" name="address1" /></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td><input type="text" size="40" name="address2" /></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><input type="text" name="city" /></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td><input type="text" size="4" name="state" /></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td><input type="text" size="10" name="zip" /></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td><input type="text" size="15" name="country" /></td>
                </tr>
            </table>

            <h3>Profile Information</h3>

            <table>
                <tr>
                    <td>Language Preference:</td>
                    <td>
                        <select name="languagePreference">
                            <option th:each="language:${languageList}" th:text="${language}" th:value="${language}"></option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Favourite Category:</td>
                    <td><select name="account.favouriteCategoryId">
                        <option th:each="category:${categoryList}" th:text="${category}" th:value="${category}"></option>
                    </select>
                </tr>
                <tr>
                    <td>Enable MyList</td>
                    <td><input type="checkbox" name="listOption" value="1" /></td>
                </tr>
                <tr>
                    <td>Enable MyBanner</td>
                    <td><input type="checkbox" name="bannerOption" value="1" /></td>
                </tr>

            </table>

            <input type="submit" value="register"/>

        </form>
    </div>

</div>

<div th:replace="common/bottom"/>
</body>
</html>